<template>
    <view class="forgot-container">
        <view class="header">
            <view class="back-icon" @click="goBack">
                <roc-icon-plus
                    type="fas"
                    name="angle-left"
                    :size="20"
                    color="#333"
                ></roc-icon-plus>
            </view>
        </view>

        <view class="title">忘记密码</view>
        <view class="subtitle">请输入以下信息修改密码</view>

        <view class="form-box">
            <view class="input-item">
                <input
                    type="text"
                    v-model="account"
                    placeholder="请输入账号"
                    placeholder-class="placeholder"
                />
            </view>

            <view class="input-item">
                <input
                    type="text"
                    v-model="verifyCode"
                    placeholder="请输入验证码"
                    placeholder-class="placeholder"
                />
                <view
                    class="verify-btn"
                    :class="{ disabled: countdown > 0 }"
                    @click="getVerifyCode"
                >
                    {{
                        countdown > 0
                            ? `获取验证码(${countdown}s)`
                            : "获取验证码"
                    }}
                </view>
            </view>

            <view class="input-item">
                <input
                    :type="showPassword ? 'text' : 'password'"
                    v-model="newPassword"
                    placeholder="请输入新密码"
                    placeholder-class="placeholder"
                />
                <view class="eye-icon" @click="togglePasswordVisibility">
                    <roc-icon-plus
                        type="fas"
                        :name="showPassword ? 'eye' : 'eye-slash'"
                        :size="20"
                        color="#999"
                    ></roc-icon-plus>
                </view>
            </view>

            <view class="input-item">
                <input
                    :type="showConfirmPassword ? 'text' : 'password'"
                    v-model="confirmPassword"
                    placeholder="请确认新密码"
                    placeholder-class="placeholder"
                />
                <view class="eye-icon" @click="toggleConfirmPasswordVisibility">
                    <roc-icon-plus
                        type="fas"
                        :name="showConfirmPassword ? 'eye' : 'eye-slash'"
                        :size="20"
                        color="#999"
                    ></roc-icon-plus>
                </view>
            </view>

            <button class="confirm-btn" @click="handleConfirm">确认修改</button>

            <view class="agreement">
                <checkbox-group>
                    <label>
                        <checkbox
                            :checked="isAgree"
                            @tap="toggleAgreement"
                            color="#2EB57D"
                        />
                        <text>已阅读并同意 </text>
                        <text class="link">《用户协议》</text>
                    </label>
                </checkbox-group>
            </view>
        </view>
    </view>
</template>

<script>
import { user } from '@/utils/api/index.js';

export default {
    data() {
        return {
            account: "",
            verifyCode: "",
            newPassword: "",
            confirmPassword: "",
            showPassword: false,
            showConfirmPassword: false,
            isAgree: true,
            countdown: 0,
            timer: null,
        };
    },
    methods: {
        goBack() {
            uni.navigateBack();
        },
        togglePasswordVisibility() {
            this.showPassword = !this.showPassword;
        },
        toggleConfirmPasswordVisibility() {
            this.showConfirmPassword = !this.showConfirmPassword;
        },
        toggleAgreement() {
            this.isAgree = !this.isAgree;
        },
        getVerifyCode() {
            if (this.countdown > 0) return;

            if (!this.account) {
                uni.showToast({
                    title: "请输入账号",
                    icon: "none",
                });
                return;
            }

            // 调用获取验证码接口
            user.getVerifyCode(this.account).then(res => {
                // 开始倒计时
                this.countdown = 60;
                this.startCountdown();

                uni.showToast({
                    title: "验证码已发送",
                    icon: "success",
                });
            }).catch(err => {
                console.error('获取验证码失败:', err);
            });
        },
        startCountdown() {
            if (this.timer) {
                clearInterval(this.timer);
            }

            this.timer = setInterval(() => {
                this.countdown--;
                if (this.countdown <= 0) {
                    clearInterval(this.timer);
                }
            }, 1000);
        },
        handleConfirm() {
            if (!this.isAgree) {
                uni.showToast({
                    title: "请先同意用户协议",
                    icon: "none",
                });
                return;
            }

            if (!this.account) {
                uni.showToast({
                    title: "请输入账号",
                    icon: "none",
                });
                return;
            }

            if (!this.verifyCode) {
                uni.showToast({
                    title: "请输入验证码",
                    icon: "none",
                });
                return;
            }

            if (
                !this.newPassword ||
                this.newPassword.length < 6 ||
                this.newPassword.length > 20
            ) {
                uni.showToast({
                    title: "请输入6-20位密码",
                    icon: "none",
                });
                return;
            }

            if (this.newPassword !== this.confirmPassword) {
                uni.showToast({
                    title: "两次密码输入不一致",
                    icon: "none",
                });
                return;
            }

            // 调用重置密码接口
            uni.showLoading({
                title: "修改中...",
            });

            const data = {
                mobile: this.account,
                code: this.verifyCode,
                password: this.newPassword
            };

            user.resetPassword(data).then(res => {
                uni.hideLoading();
                
                // 处理不同响应情况
                if (res.code === 0) {
                    // 重置成功
                    uni.showToast({
                        title: "密码修改成功",
                        icon: "success",
                        success: () => {
                            setTimeout(() => {
                                uni.navigateBack();
                            }, 1500);
                        }
                    });
                } else {
                    // 重置失败
                    uni.showToast({
                        title: res.msg || "密码修改失败",
                        icon: "none",
                    });
                }
            }).catch(err => {
                uni.hideLoading();
                uni.showToast({
                    title: err.msg || "密码修改失败，请稍后再试",
                    icon: "none",
                });
                console.error('重置密码失败:', err);
            });
        },
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer);
        }
    },
};
</script>

<style lang="scss">
.forgot-container {
    min-height: 100vh;
    padding: 150rpx 60rpx 0; 
    background-color: #fff;

    .header {
        position: absolute;
        left: 20rpx;
        top: 80rpx;
        height: 88rpx;
        display: flex;
        align-items: center;
        margin-top: 20rpx;

        .back-icon {
            padding: 10rpx;
        }
    }

    .title {
        font-size: 40rpx;
        font-weight: 600;
        color: #333;
        margin-top: 20rpx;
    }

    .subtitle {
        font-size: 28rpx;
        color: #999;
        margin-top: 10rpx;
        margin-bottom: 60rpx;
    }

    .form-box {
        .input-item {
            display: flex;
            align-items: center;
            height: 100rpx;
            border-bottom: 1px solid #eeeeee;
            margin-bottom: 30rpx;

            input {
                flex: 1;
                height: 100%;
                font-size: 30rpx;
            }

            .placeholder {
                color: #999;
            }

            .verify-btn {
                padding: 10rpx 20rpx;
                background-color: #2eb57d;
                color: #fff;
                font-size: 26rpx;
                border-radius: 4rpx;

                &.disabled {
                    background-color: #ccc;
                }
            }

            .eye-icon {
                padding: 0 10rpx;
            }
        }

        .confirm-btn {
            height: 90rpx;
            line-height: 90rpx;
            text-align: center;
            background-color: #2eb57d;
            color: #fff;
            font-size: 32rpx;
            border-radius: 12rpx;
            margin-top: 60rpx;
            margin-bottom: 40rpx;
        }

        .agreement {
            text-align: left;
            font-size: 24rpx;
            color: #999;

            checkbox {
                transform: scale(0.7);
                margin-right: 8rpx;
            }

            label {
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }

            .link {
                color: #2eb57d;
            }
        }
    }
}
</style>
